<script setup lang="ts">
import { ref } from 'vue'
let flag = ref(false)
</script>
<template>
  <button @click="flag = !flag">切换</button>
  <Transition name="my">
    <div class="box" v-if="flag"></div>
  </Transition>
  <hr>
  <hr>
  <hr>
  <hr>
  <Transition name="my">
    <div class="box" v-if="flag"></div>
  </Transition>
</template>
<style scoped>
/*做元素的显示与隐藏 vue内置了组件 Transition组件 */
/* 只要使用Transition标签包裹元素 切换显示的过程中,就自动有了六个类名 ,会在不同的时间节点触发
  进入的3个类
  v-enter-from 进入前(还没显示)
  v-enter-active 进入中(显示的过程)
  v-enter-to 进入后(完全显示完毕)
  离开的3个类
  v-leave-from  离开前
  v-leave-acive 离开期间
  v-leave-to 离开后

*/
.box {
  width: 300px;
  height: 300px;
  background-color: red;
}

.my-enter-from {
  opacity: 0;
  width: 0;
  height: 0;
}

.my-enter-active {
  transition: all 1s;
}

.my-enter-to {
  opacity: 1;
  width: 300px;
  height: 300px;
}

.my-leave-from {
  opacity: 1;
  width: 300px;
  height: 300px;
}

.my-leave-active {
  transition: all 1s;
}

.my-leave-to {
  opacity: 0;
  width: 0;
  height: 0;
}
</style>